<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用prop传递数据</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <div id="app_prop">
        <p>在父组件中声明自己的data，子组件通过显示的props来声明自己希望得到的来自父组件的数据</p>
        <child message="Hello Vue.js"></child>

        <p>在自定义组件中，使用camelCase命名，在HTML中使用kebab-case</p>
        <my-child my-message="Hello Vue.js !"></my-child>

    </div>
    <script>

        //注册全局组件
        Vue.component('child',{
            //显示的声明子组件希望得到的数据
            props:['message'],
            //就像data一样，prop可以使用在模板内，
            //同样可以在vm实例中，像“this.message”这样使用
            template:'<span>{{message}}</span>'
        });
        //注册全局组件，区别看待命名
        Vue.component('my-child',{
            //camelCase in JavaScript,kebab-case in HTML
            props:['myMessage'],
            template:'<span>{{myMessage}}</span>'
        })


        var app_prop = new Vue({
            el:'#app_prop',
        })

    </script>



</body>
</html>